<script setup>
import {useRoute,useRouter} from "vue-router";
import VideoApis from '@/apis/video.js'
import {Clock} from "@element-plus/icons-vue"
import {ElMessage} from "element-plus";
import ListApis from '@/apis/list.js'

const route = useRoute();
const router = useRouter();
const detail = ref(null)
const recommendPackage=ref([])
const categoryDetail=ref(null)


function init() {
//   query携带直播id,基本信息包括预约人数，直播间地址，直播间创建人手机号
  VideoApis.liveDetail(route.query.id).then(res => {
    detail.value = res.data
  })
//   获取推荐套餐
  ListApis.categoryDetail(route.query.categoryId).then(res=>{
    categoryDetail.value=res.data
    ListApis.packageList({
      examId:res.data.examId
    }).then(res1=>{
    //   过滤只保留推荐套餐
      recommendPackage.value=res1.data.filter(e=>{
        return e.recommend;
      })
    })
  })
}
function appoint(){
  VideoApis.appoint({
    liveId: route.query.id
  }).then(res=>{
      ElMessage({
        message: '预约成功',
        type: 'success',
      })
  })
}
function goToPackage(item){
  router.push({
    path: '/buyCenter/package/index',
    query: {
      packageId: item.id,
      ...item,


      industryId: categoryDetail.value.industryId,
      examId: categoryDetail.value.examId,
    }
  })
}
init()
</script>

<template>
  <div class="appointment-container">
    <div class="contents">
      <div class="content1" v-if="detail">
        <div class="right-top">峰会</div>
        <div class="z">
          <p class="title">{{ detail.title }}</p>
          <div class="aaa">
            <p class="a"><span>{{ detail.categoryName }}</span> <el-divider direction="vertical"></el-divider> <span>{{detail.appointmentNum}}人预约</span></p>
            <p class="b">
              <el-icon :size="16">
                <Clock/>
              </el-icon>{{ detail.startTime }}-{{detail.endTime}}
            </p>
          </div>

          <el-button type="primary" round @click="appoint">立即预约</el-button>
        </div>
      </div>
      <div class="appointment-container-flex">
        <div class="appointment-container-flex-item1">
          <div class="content2">
            <div class="text1">老师介绍</div>
            <div class="c">
              <img v-if="detail" :src="detail.teacherImg" class="img1">
              <span class="text2">
            老师介绍
          </span>
            </div>
          </div>
          <div class="content3" v-if="detail">
            <img v-if="detail" :src="detail.coverImg" class="img2">
          </div>
        </div>
        <div class="appointment-container-flex-item2">
          <span class="title1">推荐课程推荐</span>
          <div class="the-flex" v-for="(item,index) in recommendPackage" :key="index">
            <span class="info">{{ item.name }}</span>
            <span class="tip" v-if="item.discountPrice==null||item.discountPrice==0">免费</span>
            <el-button type="primary" @click="goToPackage(item)">领取</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.appointment-container {

}
.contents{
  width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px 0px;
}
.title{
  color:  #000;
  font-size: 20px;
  font-weight: 700;
}
.content1 {
  border-radius: 12px;
  background: #FFF;
  padding-left: 40px;
  padding-bottom: 16px;
}
.z{
  padding-top: 32px;
}
.a{
  color: #9598A2;
  font-size: 14px;
  font-weight: 400;
}
.b{
  color:  #888;
  font-size: 14px;
  font-weight: 400;
}
.right-top {
  float: right;
  height: 22px;
  padding: 0px 16px;
  text-align: center;
  flex-shrink: 0;
  border-radius: 0px 12px 0px 8px;
  background: rgba(60, 108, 255, 0.50);
  color: white;
}
.img1{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  float: left;
  margin-right: 16px;
}
.content2{
  background: white;
  border-radius: 12px;
  padding: 16px;

}
.c{
  margin-top: 34px;
  min-height: 60px;
}
.content2 .text1{
  color: #171920;
  font-size: 20px;
  font-weight: 500;
}
.content2 .text2{
  color: #171920;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
}
.appointment-container-flex{
  margin-top: 16px;
  display: flex;
  gap: 16px;
}
.appointment-container-flex-item1{
  flex: 1;
}
.img2{
  width: 100%;
}
.appointment-container-flex-item2{
  width: 345px;
  background: white;
  border-radius: 12px;

  align-self: flex-start;
  display: flex;
  padding: 24px 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.title1{
  color: #222;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px; /* 137.5% */
}
.the-flex{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}
.the-flex .info{
  color: #333;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
}
.the-flex .tip{
  align-self: flex-end;
  color: #F51E29;
  text-align: right;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}
.aaa{
  margin: 20px 0 20px;
}
</style>